<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

      // 参数方式：键值对  /article?id=101
      // const List = {
      //   data () {
      //     return {
      //       id: 10010
      //     }
      //   },
      //   template: `<div>
      //     <h1>列表</h1>
      //     <!--<router-link to="/article?id=101">键值对传参</router-link>--> 
      //     <!--<router-link :to="'/article?id='+id">键值对传参</router-link>-->
      //     <router-link :to="{path:'/article',query:{articleId:id}}">键值对传参</router-link>
      //   </div>`
      // }
      // const Item = {
      //   // $route  vue实例下的数据，代表路由信息对象，例如传参信息
      //   // 获取键值对传参  $route.query
      //   template: `<div>
      //     <h1>选项 {{$route.query.articleId}}</h1>
      //   </div>`
      // }

      // const router = new VueRouter({
      //   routes: [
      //     {path: '/', component: List},
      //     {path: '/article', component: Item}
      //   ]
      // })


       // 参数方式：路径上  /article/101
       const List = {
        data () {
          return {
            id: 10010
          }
        },
        template: `<div>
          <h1>列表</h1>
          <!--<router-link to="/article/10010">路径上传参</router-link>-->
          <!--<router-link :to="'/article/'+id">路径上传参</router-link>-->
          <router-link :to="{name:'article',params:{id:id}}">路径上传参</router-link>
        </div>`
      }
      const Item = {
        template: `<div>
          <h1>选项 {{$route.params.id}}</h1>
        </div>`
      }

      const router = new VueRouter({
        routes: [
          {path: '/', component: List},
          {name:'article', path: '/article/:id', component: Item}
        ]
      })


      const vm = new Vue({
        el: '#app',
        router
      })
    </script>
  </body>
</html>